import { useState } from 'react';
import { Input, Modal } from 'antd';
import { observer } from '@formily/react';
import { TextWidget, getMessage } from '@inbiz/react';
import { confirmTerminate } from '../../../OutFunction';
import './index.less';

export default observer((props: any) => {
  const { visible, $visible, instanceId, taskId, operationSuccess, inbiz, opinions, mySummary } = props;
  const [instanceNumber, $instanceNumber] = useState('');
  const confirm = () => {
    confirmTerminate({
      instanceId,
      inbiz,
      operationSuccess,
      instanceNumber,
      taskId,
      $visible,
      opinions,
      mySummary,
    });
  };
  return (
    <Modal
      title={getMessage('processButton.modalTitleTips')}
      visible={visible}
      onCancel={() => $visible(false)}
      onOk={confirm}
      destroyOnClose
      width={600}
    >
      <div className="tips">
        <TextWidget>processButton.cantBeUndone</TextWidget>
      </div>
      <div style={{ marginBottom: 10 }}>{`${getMessage(
        'processButton.inputcompleteInstance',
      )}: "${instanceId}"${getMessage('processButton.toConfirmTerminate')}`}</div>
      <Input onChange={(e) => $instanceNumber(e.target.value)} />
    </Modal>
  );
});
